<style type="text/css">
.box{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	width:160px;
	height:300px;
	background-color:#fbab34;
	padding: 10px;
	color:#FFF;
	font-size:14px;
	text-shadow: 0.05em 0.05em 0.05em #333;
	margin:0 0 10px 0px;

}
.search{
	-webkit-border-radius: 05px;
	-moz-border-radius: 05px;
	border-radius: 05px;
	border:none;
	width:150px;
	height:20px;
	border: 1px solid #9B9B9B;
border-bottom: 1px solid #D8D8D8;
border-right: 1px solid #D8D8D8;
	}
.box select{
	-webkit-border-radius: 05px;
	-moz-border-radius: 05px;
	border-radius: 05px;
	border:none;
	width:70px;
	height:20px;
	border: 1px solid #9B9B9B;
border-bottom: 1px solid #D8D8D8;
border-right: 1px solid #D8D8D8;
	}
.box p{
	font-size:18px;
	color:#fff;
	text-shadow: 0.05em 0.05em 0.05em #333
	}
#submitButton{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border:none;
	width:80px;
	height:35px;
	color:#fff;
	font-size:16px;
	border:#FFF 3px solid;
	background-color:#0896ff;
	text-shadow: 0.05em 0.05em 0.05em #333;
	float:right;
	}
#submitButton:hover{
	background-color:#3CF;
	}
</style>
<script>
  function valiadateCheckInCheckOut(){
    var checkInDay  = document.getElementsByName("startDay")[0];
    var checkOutDay = document.getElementsByName("endDay")[0];
    var checkInMonth  = document.getElementsByName("startMonth")[0];
    var checkOutMonth = document.getElementsByName("endMonth")[0];
    var checkInYear  = document.getElementsByName("startYear")[0];
    var checkOutYear = document.getElementsByName("endYear")[0];

    var checkInDayValue  = eval(checkInDay.value);
    var checkOutDayValue = eval(checkOutDay.value);
    var checkInMonthValue  = eval(checkInMonth.value);
    var checkOutMonthValue = eval(checkOutMonth.value);
    var checkInYearValue  = eval(checkInYear.value);
    var checkOutYearValue = eval(checkOutYear.value);

    //alert(checkInMonthValue+":"+checkOutMonthValue);
    if (checkInDayValue == checkOutDayValue && checkInMonthValue == checkOutMonthValue && checkInYearValue == checkOutYearValue ) {

         alert("Please select next night.");

        //document.getElementById('error-identificational').innerHTML = "* Identificational.";
        checkOutDay.style.borderStyle = "solid";
        checkOutDay.style.borderColor = "#FF0000";
        checkOutDay.style.borderWidth = "1px";
        checkOutDay.focus();
        return false;
    } else if (checkInDayValue > checkOutDayValue && checkInMonthValue == checkOutMonthValue && checkInYearValue == checkOutYearValue ) {

         alert("Please select checkout day more than checkin day.");

        //document.getElementById('error-identificational').innerHTML = "* Identificational.";
        checkOutDay.style.borderStyle = "solid";
        checkOutDay.style.borderColor = "#FF0000";
        checkOutDay.style.borderWidth = "1px";
        checkOutDay.focus();
        return false;
    } else if (checkInMonthValue > checkOutMonthValue && checkInYearValue == checkOutYearValue ) {

         alert("Please select checkout month more than checkin month.");

        //document.getElementById('error-identificational').innerHTML = "* Identificational.";
        checkOutMonth.style.borderStyle = "solid";
        checkOutMonth.style.borderColor = "#FF0000";
        checkOutMonth.style.borderWidth = "1px";
        checkOutMonth.focus();
        return false;
    } else if (checkInYearValue > checkOutYearValue ) {

         alert("Please select checkout year more than checkin year.");

        //document.getElementById('error-identificational').innerHTML = "* Identificational.";
        checkOutYear.style.borderStyle = "solid";
        checkOutYear.style.borderColor = "#FF0000";
        checkOutYear.style.borderWidth = "1px";
        checkOutYear.focus();
        return false;
    }  else {
      checkOutDay.style.borderStyle = "solid";
      checkOutDay.style.borderColor = "#00CC00";
      checkOutDay.style.borderWidth = "1px";
      //document.getElementById('error-country').innerHTML = "<IMG SRC='modules/Booking/pnimages/right.gif' WIDTH='10' HEIGHT='10'>";
    }
  }
</script>
<div class="box">
<p><!--[pnml name="_POBPORTAL_USER_SEARCH_HOTEL_IN_PHUKET"]--></p>
<FORM METHOD=POST ACTION="<!--[pnmodurl modname='POBPortal' type='search' func='searchResult']-->">

<TABLE width="100%">
  <TR>
    <TD colspan="2">
      <INPUT 
        TYPE="text" 
        class="search" 
        NAME="form[search]" 
        value="<!--[$form.search]-->" 
        placeholder="<!--[pnml name='_POBPORTAL_USER_SEARCH_SUGGESSTION']-->" 
       >
    </TD>
  </TR>
  <TR>
    <TD colspan="2"></TD>
  <td colspan="2"></TD>
  </TR>
  <TR>
    <TD colspan="2"><!--[pnml name='_POBPORTAL_USER_CHECK_IN_DATE']--></TD>
    <td colspan="2" rowspan="8">
  </TR>
  <TR>
    <TD colspan="2"><!--[innova_html_select_date end_year=+1 field_order="DMY" prefix="start"]--></TD>
  </TR>
  <TR>
    <TD colspan="2"><!--[pnml name='_POBPORTAL_USER_CHECK_OUT_DATE']--></TD>
  </TR>
  <TR>
    <TD colspan="2"><!--[innova_html_select_date next_day=1 end_year=+1 field_order="DMY" prefix="end"]--></TD>
  </TR>
<!--  <TR>
    <TD colspan="2"><input type="checkbox" id="availcheck2" />
      <label id="labfor" for="availcheck2"> ไม่ระบุวันที่เข้าพัก </label></TD>
  </TR> -->
  <TR>
    <TD colspan="2">&nbsp;</TD>
    </TR>
  <TR>
    <TD colspan="2"><button id="submitButton" type="submit" onclick="return valiadateCheckInCheckOut()"><!--[pnml name="_POBPORTAL_USER_SAERCH_BUTTON"]--></button>  </TD>
  </TR>
  </TABLE>
</FORM>
</div>